<template>
<div class="hello">
    <div class="opea-column">
      <el-button type="primary" icon="el-icon-plus" @click="open()">{{$t('ip.createIP')}}</el-button>
      <el-button type="primary" icon="el-icon-plus" :disabled="removeAllImei.length>0 ? false : true" @click="allRemove()">{{$t('opea.allDelete')}}</el-button>
    </div>
    <el-table
      border
      v-loading="loading"
      height="620px"
      :data="tableData"
      @selection-change="handleSelectionChange"
      style="width: 100%">
      <el-table-column
      type="selection"
      width="55">
    </el-table-column>
      <el-table-column
        prop="name"
        :label="$t('ip.table.name')">
      </el-table-column>
      <el-table-column
        prop="ipAddr"
        :label="$t('ip.table.ip')">
      </el-table-column>
      <el-table-column
        prop="port"
        :label="$t('ip.table.port')">
      </el-table-column>
      <el-table-column
        prop="protocol"
        :label="$t('ip.table.protocol')">
      </el-table-column>
      <el-table-column
      :label="$t('opea.opea')"
      width="200">
      <template slot-scope="scope">
        <!-- <el-button type="text" size="small" @click="go(scope.row)">{{$t('opea.lookConfig')}}</el-button> -->
        <!-- <el-button type="text" size="small" @click="edit(scope.row)">{{$t('opea.edit')}}</el-button> -->
        <el-button type="text" size="small" @click="remove(scope.row)">{{$t('opea.delete')}}</el-button>
      </template>
    </el-table-column>
    </el-table>


    <el-dialog :title="$t(formTitle)" :visible.sync="dialogFormVisible" width="800px" :close-on-click-modal="false">
      <el-form :model="form" :rules="rules" ref="form">
        <el-form-item :label="$t('ip.table.name')" :label-width="formLabelWidth" prop="name">
          <el-input v-model="form.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item :label="$t('ip.table.ip')" :label-width="formLabelWidth" prop="ipAddr">
          <el-input v-model="form.ipAddr" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item :label="$t('ip.table.port')" :label-width="formLabelWidth" prop="port">
          <el-input v-model="form.port" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item :label="$t('ip.table.protocol')" :label-width="formLabelWidth" prop="protocol">
          <el-select v-model="form.protocol" class="my-select">
              <el-option :label="$t('ip.form.coap')" value="CoAP"></el-option>
              <el-option :label="$t('ip.form.lwm2m')" value="LWM2M"></el-option>
              <el-option :label="$t('ip.form.udp')" value="UDP"></el-option>
          </el-select>
        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">{{$t('opea.cancel')}}</el-button>
        <el-button type="primary" @click="addSubmit()">{{$t('opea.ok')}}</el-button>
      </div>
    </el-dialog>

    <el-dialog
      :title="$t('delDialog.title')"
      :visible.sync="dialogVisible"
      width="30%">
      <span>{{$t('delDialog.message')}}</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">{{$t('opea.cancel')}}</el-button>
        <el-button type="primary" @click="del()">{{$t('opea.ok')}}</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import {resetForm,isIP} from '../handle'
export default {
    name:'ip-pool',
    data(){
        let reg = /((1[0-9][0-9]\.)|(2[0-4][0-9]\.)|(25[0-5]\.)|([1-9][0-9]\.)|([0-9]\.)){3}((1[0-9][0-9])|(2[0-4][0-9])|(25[0-5])|([1-9][0-9])|([0-9]))/;
        let portReg = /^[1-9]$|(^[1-9][0-9]$)|(^[1-9][0-9][0-9]$)|(^[1-9][0-9][0-9][0-9]$)|(^[1-6][0-5][0-5][0-3][0-5]$)/;
        let ipAddress = (vaild,value,callback)=>{
            if(!value){
                return callback(new Error(this.$t('validate.input.ip')))
            }
            if(!value){
                return callback(new Error(this.$('validate.input.ip')))
            }
            if(!isIP(value)){
                return callback(new Error(this.$t('validate.input.ip')))
            }
            callback()
        }
        let port = (vaild,value,callback)=>{
            if(!value){
                return callback(new Error(this.$t('validate.input.port')))
            }
            if(!portReg.test(value)){
                return callback(new Error(this.$t('validate.input.port')))
            }
            callback()
        }
        return{
            tableData:[],
            form:{},
            formTitle:'ip.form.addTitle',
            rules:{
                name:[
                    {required:true,message:this.$t('validate.input.name') ,trigger:'blur'}
                ],
                ipAddr:[
                    {required:true,validator:ipAddress ,trigger:'blur'}
                ],
                port:[
                    {required:true,validator:port,trigger:'blur'}
                ],
                protocol:[
                    {required:true,message:this.$t('validate.select.protocol'),trigger:'change'}
                ]
            },
            dialogFormVisible : false,
            dialogVisible : false,
            formLabelWidth: '120px',
            loading:false,
            removeId:[],
            removeAllImei:[]
        }
    },
    created(){
        this.getTableData()
    },
    methods:{
        getTableData(){
            this.loading = true;
            this.$axios.get('m/q/i')
            .then(res=>{
                this.loading = false;
                this.tableData = res.data
            })
        },
        open(){
            this.dialogFormVisible = true;
            console.log(this.form)
            resetForm(this,'form')
        },
        addSubmit(){
            this.formTitle = 'ip.form.addTitle'
            this.$refs.form.validate(valid=>{
                if(!valid){
                    return
                }
                let url = 'm/a/i';
                let data = {
                    n:this.form.name,
                    i:this.form.ipAddr,
                    p:this.form.port,
                    t:this.form.protocol
                }
                this.$axios.post(url,data)
                .then(res=>{
                    if(res.data.code ==201){
                        this.$message.success(res.data.message)
                        this.getTableData()
                    }else{
                        this.$message.console.error(res.data.message);
                    }
                })
                this.dialogFormVisible = false;
            })
        },
        edit(row){
            this.formTitle = 'ip.form.editTitle'
            this.$axios.get('?id='+row.id)
            .then(res=>{
                let data = res.data;
                this.form = Object.assign({},{id:data.id, ip: data.ip, port: data.port, protocol:data.protocol})
            })
        },
        remove(row){
            this.dialogVisible = true;
            this.removeId = [row.id]
        },
        allRemove(){
            this.del(this.removeAllImei)
        },
        handleSelectionChange(row){
            this.removeAllImei = [];
            row.forEach((v,k)=>{
                this.removeAllImei[k]=v.id
            })
        },
        del(ipArr){
            this.$axios.delete('m/d/i',{data:ipArr?this.removeAllImei:this.removeId})
            .then(res=>{
                if(res.data.code ==202){
                    this.$message.success(res.data.message)
                    this.dialogVisible = false;
                    this.getTableData()
                }else{
                    this.$message.error(res.data.message)
                    this.dialogVisible = false;
                }
            })
        }
    }
}
</script>
<style scoped>
.opea-column{
  margin-bottom: 15px;
}
</style>